<template>
  <a-layout>
    <a-layout-header class="header-cls">
      <a-menu
        :selectedKeys="selectedKeys"
        theme="dark"
        mode="horizontal"
        :style="{ lineHeight: '64px' }"
        @click="handleClickMenu"
      >
        <a-menu-item key="reserve">场地预定</a-menu-item>
        <a-menu-item key="memberManagement">会员管理</a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout-content style="padding: 20px">
      <RouterView />
    </a-layout-content>
  </a-layout>
</template>
<script setup lang="ts" name="Layouts">
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'

const route = useRoute()
const selectedKeys = ref([route.name])
const router = useRouter()
const handleClickMenu = (data: { key: string }) => {
  router.push(`/home/${data.key}`)
  selectedKeys.value = [data.key]
}
</script>
<style lang="less" scoped></style>
